<template>
  <div class="main">

    <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper" class="my-swipe">
      <swiper-slide><img src="./../assets/carousel.png"></swiper-slide>
      <swiper-slide><img src="./../assets/carousel.png"></swiper-slide>
      <swiper-slide><img src="./../assets/carousel.png"></swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
<!--     <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
    </swiper>
    <div class="about-us content">
      <router-link to="/aboutUs">
        <h3 class="title">ABOUT US</h3>
        <p class="brif">关于我们</p>
      </router-link>
      <div class="aboutPic">
        <img src="./../assets/about1.png" alt="about1">
        <img src="./../assets/about2.png" alt="about2">
        <div>
          <p>易水生态（杭州）有限公司，易水生态（杭州）有限公司，易水生态（杭州）有限公司，易水生态（杭州）有限公司，易水生态（杭州）有限公司，易水生态（杭州）有限公司，易水生态（杭州）有限公司。</p>
          <p>易水生态（杭州）有限公司。</p>
          <a href="" class="more">阅读更多</a>
        </div>
      </div>
    </div>
    <div class="services">
      <h3 class="title">SERVICES</h3>
      <p class="brif">专业服务</p>
      <div class="section">
        <router-link to="/projectSum">
          <div class="sec">
            <img src="./../assets/service1.png" alt="service1">
            <h4>一体化服务</h4>
            <p>INTEGRATED SERVICE</p>
            <span>咨询·设计·建设</span>
          </div>
        </router-link>
        <router-link to="/productSum">
          <div class="sec">
            <img src="./../assets/service2.png" alt="service2">
            <h4>易水产品</h4>
            <p>E-WATER PRODUCT</p>
            <span>净水剂·膜制品</span>
          </div>
        </router-link>
        <router-link to="/ctrade">
          <div class="sec">
            <img src="./../assets/service3.png" alt="service3">
            <h4>碳交易平台</h4>
            <p>CO2 TRADE PLATFORM</p>
            <span>碳交易平台</span>
          </div>
        </router-link>
      </div>
    </div>
    <div class="product">
      <router-link to="/productSum">
        <h3 class="title">PRODUCT</h3>
        <p class="brif">易水产品</p>
      </router-link>
      <div class="proFlex content">
        <div class="pro">
          <img src="./../assets/product1.png" alt="product1">
          <h5>净水剂</h5>
          <p>简介：易水生态（杭州）有限公司易水生态（杭州）有限公司易水生态（杭州）有限公司易水生态（杭州）有限公司</p>
        </div>
        <div class="pro">
          <img src="./../assets/product2.png" alt="product2">
          <h5>膜制品</h5>
          <p>简介：易水生态（杭州）有限公司易水生态（杭州）有限公司易水生态（杭州）有限公司</p>
        </div>
      </div>
    </div>
    <div class="integrated">
      <router-link to="/projectSum">
        <h3 class="title">INTEGRATED SERVICE</h3>
        <p class="brif">易水一体化工程</p>
      </router-link>
      <div class="content">
        <img src="./../assets/show.png" alt="show">
        <div class="intFlex">
          <div class="show">
            <img src="./../assets/show1.png" alt="show1">
            <h5>水淡化处理</h5>
            <p>工程地点</p>
          </div>
          <div class="show">
            <img src="./../assets/show2.png" alt="show2">
            <h5>水回收</h5>
            <p>工程地点</p>
          </div>
          <div class="show">
            <img src="./../assets/show3.png" alt="show3">
            <h5>污水处理</h5>
            <p>工程地点</p>
          </div>
          <div class="show">
            <img src="./../assets/show4.png" alt="show4">
            <h5>水淡化</h5>
            <p>工程地点</p>
          </div>
        </div>
      </div>
    </div>
    <div class="contact">
      <h3 class="title">CONTACT US</h3>
      <p class="brif">在线留言</p>
      <span>如果您有关于水于环境或产品的问题，可填写此留言。</span>
      <span>我们将及时与您联系，尽快处理您的留言。</span>
      <div class="content">
        <div class="con-form clearfix">
          <div class="con-left">
            <label for="name">姓名</label>
            <input type="text" id="name" placeholder="姓名">
            <label for="phone">联系电话</label>
            <input type="text" id="phone" placeholder="联系电话">
            <label for="email">邮箱</label>
            <input type="text" id="email" placeholder="邮箱">
          </div>
          <div class="con-right">
            <label for="msg">留言内容</label>
            <textarea name="msg" id="msg" cols="300" rows="10"></textarea>
            <input type="button" value="留言" id="sub">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
        notNextTick: true,
        swiperOption: {
          autoplayDisableOnInteraction: false,
          loop:true,
          autoplay: 3000,
          direction : 'horizontal',
          pagination : '.swiper-pagination',
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {

    }

}
</script>

<style scoped>
@media screen and (max-width:1150px) {
  .con-right {
    float: left !important;
  }
}
.contact {
  background-color: rgb(225,242,242);
}

.my-swipe img {
  width: 100%;
  height: 100%;
}
.my-swipe {
  height: 570px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  z-index: -100;
}
.contact>span {
  display: block;
  color: rgb(174,174,174);
  text-align: center;
  letter-spacing: 2px;
}
.con-form {
  background-color: rgb(255,255,255);
  margin-top: 1.5rem;
  padding: 2.25rem 3.75rem 1rem 3.75rem;
}
.con-form label {
  font-weight: bold;
  color: rgb(90,90,90);
  display: block;
  text-align: left;
  margin-bottom: 0.65rem;
  margin-top: 1rem;
}
.con-form input {
  display: block;
  text-align: left;
  width: 22.5rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  border-radius: 5px;
  border:1px solid #DBDBDB;
}
.con-left {
  float: left;
}
.con-right {
  float: right;
  width: 20rem;
}
#msg {
  width: 20rem;
  height: 11rem;
  font-size: 0.75rem;
  border-radius: 5px;
  border:1px solid #DBDBDB;
}
#sub {
  width: 5rem;
  height: 2rem;
  border-radius: 5px;
  background-color: rgb(17,162,208);
  color: rgb(255,255,255);
  margin-top: 1rem;
  text-align: center;
  margin-left: 15rem;
}
.main {
  width: 100%;
}
.aboutPic {
  margin: 0 0 2.5rem 0;
  display: flex;
  justify-content: space-between;
}
.about-us img {
  margin-right: 1.5rem;
  width: 45%;
}
.about-us>div p {
  color: rgb(130,130,130);
  font-size: 0.7rem;
  font-weight: normal;
  text-align: left;
 /* max-width: 20rem;*/
}
.about-us>div p:nth-child(1) {
  margin-top: 0.6rem;
}
.about-us>div p:nth-child(2) {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}
.more {
  display: block;
  color: rgb(34,168,212);
  width: 6rem;
  font-size: 0.75rem;
  padding-left: 1rem;
  background: url('../assets/arrow.png') no-repeat left center;
  text-align: left;
}
.services {
  background-color: rgb(195,226,228);
}
.section {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.sec {

  text-align: center;
}
.sec h4 {
  margin: 1.5rem 0 0.4rem 0;
  letter-spacing: 6px;
  color: rgb(160,130,130);
}
.sec p {
  font-size: 0.5rem;
  color: rgb(94,94,94);
}
.sec span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: rgb(94,94,94);
  margin: 1.5rem 0 3rem;
}
.product {
  background-color: rgb(243,243,243);
  padding-bottom: 4.2rem;
}
.proFlex {
  display: flex;
  justify-content: space-between;
}
.pro img {
  width: 100%;
}
.pro:nth-child(2) {
  margin-left: 1.6rem;
}
.pro {
  width: 28rem;
  background-color: rgb(255,255,255);
  box-shadow: 0 0 1rem rgb(180,180,180);
}
.pro h5, .pro p {
  margin-left: 1.25rem;
}
.pro h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: rgb(120,120,120);
  font-size: 0.8rem;
}
.pro p {
  margin-bottom: 1rem;
  color: rgb(180,180,180);
}

.intFlex {
  display: flex;
  justify-content: space-between;
}
.content>img {
  display: block;
  margin: 0 auto 2.5rem;
}
.show {
  background-color: rgb(3,87,153);
  margin-bottom: 4.5rem;
}
.show h5, .show p {
  margin-left: 1.25rem;
  color: rgb(255,255,255);
}
.show h5 {
  margin-top: 13px;
  margin-bottom: 7px;
  font-size: 0.9rem;
}
.show p {
  margin-bottom: 0.9rem;
  font-size: 0.7rem;
}
.show img {
  width: 100%;
}

</style>
